<template>
  <div class="bg-purple">
    <div v-for="(item, index) in detailsList"
         :key="index">
      <h6 class="hLabel">主体信息</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 入驻类型 </div>
            <div> 营业执照名称 </div>
            <div> 营业执照有效期 </div>
            <div>营业执照地址</div>
            <div> 营业执照 </div>
            <div> 办公环境 </div>
          </div>
          <div class="content">
            <div>
              {{
                item.merchantsapplyfor.subjectType == 'SUBJECT_TYPE_INDIVIDUAL'
                  ? '个体工商户'
                  : '企业'
              }}
            </div>
            <el-tooltip class="item"
                        effect="dark"
                        :content="item.businesslicense.merchantName"
                        placement="top">
              <div class="font-overflow">
                {{ item.businesslicense.merchantName }}
              </div>
            </el-tooltip>
            <div>{{ item.businesslicense.periodBegin }} -
              {{ item.businesslicense.periodEnd }}
            </div>

            <el-tooltip class="item"
                        effect="dark"
                        :content="item.businesslicense.licenseAddress"
                        placement="top">
              <div class="font-overflow">
                {{ item.businesslicense.licenseAddress }}</div>
            </el-tooltip>

            <div class="view"
                 @click="
                onPreview(item.businesslicense.licenseCopy, 'licenseCopy')
              ">
              查看预览

              <el-image-viewer v-if="showViewer"
                               style="z-index: 9999"
                               :on-close="closeViewer"
                               :url-list="urlListArray" />
            </div>
            <div class="view"
                 @click="onPreview(item.businessinfo.indoorPic, 'indoorPic')">
              查看预览
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 商户简称 </div>
            <div> 营业执照编号</div>
            <div> 门头照片 </div>
            <div> 特殊资质 </div>
            <div> 所在行业 </div>
          </div>
          <div class="content">
            <div class="font-overflow">
              {{ item.businessinfo.merchantShortname }}
            </div>
            <div class="font-overflow">
              {{ hiddenCardId(item.businesslicense.licenseNumber) }}
            </div>
            <div class="view"
                 @click="
                onPreview(
                  item.businessinfo.storeEntrancePic,
                  'storeEntrancePic'
                )
              ">
              查看预览
            </div>
            <div class="view"
                 @click="
                onPreview(item.settlement.qualifications, 'storeEntrancePic')
              ">
              查看预览
            </div>
            <div class="font-overflow">
              {{ item.settlement.qualificationType }}
            </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">法人/负责人姓名</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 姓名 </div>
            <div> 证件地址 </div>
            <div> 证件正面 </div>
          </div>
          <div class="content">
            <div> {{ item.businesslicense.legalPerson }} </div>
            <el-tooltip class="item"
                        effect="dark"
                        :content="item.merchantsapplyfor.idCardAddress"
                        placement="top">
              <div class="font-overflow">
                {{ item.merchantsapplyfor.idCardAddress }}
              </div>
            </el-tooltip>
            <div class="view"
                 @click="
                onPreview(item.merchantsapplyfor.idCardCopy, 'idCardCopy')
              ">
              查看预览
              <!-- <el-image-viewer v-if="showViewer"
                               :on-close="closeViewer"
                               :url-list="idCardCopyArr(item.merchantsapplyfor.idCardCopy
)" /> -->
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 证件有效期 </div>
            <div> 身份证号 </div>
            <div> 证件反面</div>
          </div>
          <div class="content">
            <div>
              {{ item.merchantsapplyfor.cardPeriodBegin }} -
              {{ item.merchantsapplyfor.cardPeriodEnd }}
            </div>
            <div> {{ hiddenCardId(item.merchantsapplyfor.idCardNumber) }} </div>

            <div class="view"
                 @click="
                onPreview(
                  item.merchantsapplyfor.idCardNational,
                  'idCardNational'
                )
              ">
              查看预览

              <!-- <el-image-viewer v-if="showViewer"
                               :on-close="closeViewer"
                               :url-list="idCardNationalArr()" /> -->
            </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">经营信息</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 详情地址 </div>
            <div> 注册地址 </div>
            <div> 手机号码 </div>
          </div>
          <div class="content">
            <div class="font-overflow">
              {{ getRegionLabel(item.businessinfo.bizAddressCode) }}
            </div>
            <el-tooltip class="item"
                        effect="dark"
                        :content="item.businessinfo.bizStoreAddress"
                        placement="top">
              <div class="font-overflow">
                {{ item.businessinfo.bizStoreAddress }}</div>
            </el-tooltip>
            <div>{{ hiddenCardId(item.merchantsapplyfor.mobilePhone) }} </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 电子邮箱 </div>
          </div>
          <div class="content">
            <div> {{ hiddenCardId(item.merchantsapplyfor.contactEmail) }} </div>
          </div>
        </div>
      </div>
      <h6 class="hLabel">结算到银行卡</h6>
      <div class="subjectInformationLeft">
        <div class="subjectInformationTitle">
          <div class="title">
            <div> 开户城市 </div>
            <div> 开户名称 </div>
            <div> 开户类型 </div>
          </div>
          <div class="content">
            <div> {{ getRegionLabel(item.bankaccount.bankAddressCode) }} </div>
            <div> {{ item.bankaccount.accountBank }} </div>
            <div>
              {{
                item.bankaccount.bankAccountType ==
                'BANK_ACCOUNT_TYPE_CORPORATE'
                  ? '对公银行账户'
                  : '经营者个人银行卡'
              }}
            </div>
          </div>
        </div>
        <div class="subjectInformationContent">
          <div class="title">
            <div> 抽佣比例 </div>
            <div> 银行账号</div>
          </div>
          <div class="content">
            <div> {{ item.settlement.activitiesRate }} </div>
            <div> {{ hiddenCardId(item.bankaccount.accountNumber) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { getRegionLabel, cityData } from 'ele-admin/packages/utils/regions';
export default {
  name: 'incomingDetails',
  components: {
    ElImageViewer
  },
  props: {
    detailsList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      showViewer: false, // 显示查看器
      // 图片预览数组
      imgViewArr: []
    };
  },
  methods: {
    // 点击按钮预览图片
    onPreview (imgStr) {
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.showViewer = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    }
  },
  computed: {
    // 营业执照
    urlListArray () {
      return this.imgViewArr;
    },
    // ** 隐私部分带*号
    hiddenCardId () {
      return function (str, frontLen = 4, endLen = 4) {
        //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
        var len = str.length - frontLen - endLen;
        var start = '';
        for (var i = 0; i < len; i++) {
          start += '*';
        }
        // 最后的返回值由三部分组成
        return (
          str.substring(0, frontLen) +
          start +
          str.substring(str.length - endLen)
        );
      };
    },
    //  code码获取城市标题
    getRegionLabel () {
      return function (params) {
        console.log(cityData);

        return getRegionLabel(params);
      };
    }
  }
};
</script>
<style lang="less" scoped>
.bg-purple {
  margin-top: 20px;
  padding-bottom: 50px;
  // h标签
  min-width: 850px;
  .hLabel {
    margin: 10px 0 20px;
    font-weight: 700;
    &::before {
      content: '';
      display: inline-block;
      vertical-align: top;

      margin-right: 5px;
      height: 23px;
      width: 6px;
      background-color: #1e6ceb;
    }
  }

  .subjectInformationLeft {
    display: flex;
    align-items: center;
    justify-content: center;

    .subjectInformationTitle {
      width: 792px;

      //   background-color: aqua;
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        margin-right: 46px;
        text-align: right;
        width: 100px;
        div {
          color: #666;
          margin: 10px 0 10px;
        }
      }
      .content {
        width: 250px;
        div {
          color: #000;
          margin: 10px 0 10px;
        }
        .view {
          color: #1e6ceb;
          cursor: pointer;
        }
      }
    }
    .subjectInformationContent {
      display: flex;
      align-items: center;
      justify-content: center;

      .title {
        margin-right: 46px;
        text-align: right;
        width: 100px;
        div {
          color: #666;
          margin: 10px 0 10px;
        }
      }
      .content {
        width: 250px;
        div {
          color: #000;
          margin: 10px 0 10px;
        }
        .view {
          color: #1e6ceb;
          cursor: pointer;
        }
      }
      width: 792px;

      //   background-color: aquamarine;
    }
  }
}
</style>
